import React from "react";
import { connect } from 'react-redux'
import { ImgWapper, ImgListItem } from '../style'
import { v4 as uuid } from 'uuid'
class ImgList extends React.Component {
  render() {
    return (
      <>
        <ImgWapper>
          {
            this.props.imgList.map((item) => (
              <ImgListItem key={uuid()}>
                <a target="_blank" href="/#" onClick={(e) => e.preventDefault()}>
                  <img src={item.get('imgUrl')} alt="Banner s daily" />
                </a>
              </ImgListItem>
            ))
          }
        </ImgWapper>
      </>
    )
  }
}

const mapState = (state) => ({
  imgList: state.getIn(['content', 'imgList'])
})

const mapDispatch = (dispatch) => ({

})

export default connect(mapState, mapDispatch)(ImgList)